import { useRef } from "react";

export default function DragAndDropUpload({children,onFileUpload}){
    const dropRef = useRef(null);
 
    const handleDragOver = (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropRef.current.style.borderColor = 'green';
    };
   
    const handleDragLeave = () => {
      dropRef.current.style.borderColor = 'gray';
    };
   
    const handleDrop = (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropRef.current.style.borderColor = 'gray';
   
      const files = e.dataTransfer.files;
      if (files.length > 0) {
        onFileUpload(files);
      }
    };

    return (
        <div
          ref={dropRef}
        //   style={{
        //     width: '300px',
        //     height: '200px',
        //     border: '2px dashed gray',
        //     display: 'flex',
        //     alignItems: 'center',
        //     justifyContent: 'center',
        //     flexDirection: 'column',
        //     cursor: 'pointer',
        //   }}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
        >
          <p>拖拽文件到这里上传</p>
          {children}
        </div>
      );
}
